<template>
  <el-container class="layout">
<el-aside width="200px">
  <h1>黑马面经管理</h1>
  <el-menu
  router
  active-text-color="#ffd04b"
    :default-active="$route.path"
    class="el-menu-vertical-demo"
>
    <el-menu-item index="/charts">
      <i class="el-icon-pie-chart"></i>
      <span slot="title">数据看板</span>
    </el-menu-item>
    <el-menu-item index="/manage">
      <i class="el-icon-collection"></i>
      <span slot="title">面经管理</span>
    </el-menu-item>
  </el-menu>

</el-aside>
<el-container>
  <el-header>
    <div class="header-right">
        <div class="img">
        <el-avatar :src="user.avatar"></el-avatar>
        <span>{{user.name}}</span>
        </div>
        <!-- <i @click="loginout" class="el-icon-switch-button"></i> -->
        <el-button
    class="el-icon-switch-button" type="text" @click="open"></el-button>
    </div>
  </el-header>
  <el-main>
    <router-view></router-view>
  </el-main>
</el-container>
</el-container>
</template>

<script>
import { removeToken } from '../../utils/token'
import { logout, getUser } from '../../api/user'
// import stroe from '../../store/index'
export default {
  data () {
    return {
      user: ''
    }
  },
  async created () {
  // console.log(stroe)
    const res = await getUser()
    this.user = res.data.data
  },
  methods: {
    async loginout () {
      const res = await logout()

      console.log(res.data.data)
      removeToken()
      this.$router.replace('/login')
    },
    open () {
      const h = this.$createElement
      this.$msgbox({
        title: '退出登录',
        message: h('p', null, [
          h('span', null, '确定要'),
          h('i', { style: 'color: teal' }, '退出吗')
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(action => {
        this.loginout()
        this.$message({
          type: 'success',
          message: '退出成功',
          center: true
        })
      }).catch(() => {})
    }
  }
}
</script>
<style lang="scss">
.layout{
height: 100vh;
}
.el-header{
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 60px;
  padding: 0;
  .header-right{
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    .el-button{
      width: 60px;
      font-size: 26px;
      color: black;
    }
    .img{
      width: 170px;
      height: 60px;
      background-color: #dfe0e6;
      display: flex;
      align-items: center;
      justify-content:space-evenly;
    }
    img{
      border-radius: 50%;
      // margin: 0px 10px;
      cursor: pointer;
    }
    .el-button:hover{
      color: #e6702d;
    }
    i{
      color: gray;
      font-size: 26px;
      width: 60px;
      height: 60px;
      line-height: 60px;
      cursor: pointer;
    }

  }
}
.el-menu{
  border-right: none;
  margin-top: 20px;
  background-color: #313a46;
  .el-menu-item{
    color: white;
    text-align: left;
  }
  &-item {
      background-color: transparent !important;
      > span,
      i {
        padding-left: 5px;
      }
    }
}
.el-aside {
  background-color: #313a46;
  color: rgb(255, 255, 255);
  text-align: center;
  height: 100vh;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}
h1{
height: 60px;
line-height: 60px;
}
</style>
